<template>
	<!-- 结算对账页面 -->
	<div class="settle">
		<div class="top">
			<p>结算对账</p>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/fundmanage' }">资金管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/fundmanage/settle' }">结算对账</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="mid">
			<div class="start">
				<!-- 搜索部分 -->
				<el-form :model="search" label-width="120px" ref="searchForm">
					<el-form-item label="结算时间：" prop="date">
						<el-col :span="6.8">
							<el-date-picker value-format="yyyy-MM-dd" v-model="search.date" type="date"
								placeholder="选择日期">
							</el-date-picker>
						</el-col>
						<!-- <el-col class="line" :span="1" style="text-align: center;">~</el-col>
						<el-col :span="7">
							<el-date-picker value-format="yyyy-MM-dd" v-model="value2" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-col> -->
					</el-form-item>
					<el-form-item label="结算状态：" prop="state">
						<el-select v-model="search.state">
							<el-option label="不汇总" value="不汇总"></el-option>
							<el-option label="已结算" value="已结算"></el-option>
							<el-option label="未结算" value="未结算"></el-option>
							<el-option label="结算中" value="结算中"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="账单类型：" prop="type">
						<el-select v-model="search.type">
							<el-option label="商家" value="商家"></el-option>
							<el-option label="个人" value="个人"></el-option>
							<el-option label="公司" value="公司"></el-option>
							<el-option label="团体" value="团体"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="结算金额：" prop="money">
						<el-col :span="4">
							<el-input v-model="search.money"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-button type="primary">搜索</el-button>
						<el-button type="primary" @click="resetForm('searchForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="result">
				<!-- 交易记录数据部分 -->
				<p style="line-height: 40px;">共{{tableData.length}}条交易记录</p>
				<el-table :data="ftableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%;text-align: center;">
					<el-table-column prop="date" label="结算时间">
					</el-table-column>
					<el-table-column prop="type" label="账单类型">
					</el-table-column>
					<el-table-column prop="money" label="结算金额(元)">
					</el-table-column>
					<el-table-column prop="state" label="结算状态">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="120">
						<template slot-scope="scope">
							<el-button @click.native.prevent="deleteRow(scope.$index,scope.row, tableData)"
								style="color: orangered;" type="text" size="small">
								删除
							</el-button>
							<el-button @click.native.prevent="toEditRow(scope.$index,scope.row, tableData)"
								type="primary" size="mini">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 编辑弹框 -->
				<el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
					<el-form label-width="90px" :model="tempRow">
						<el-form-item label="结算时间">
							<el-date-picker value-format="yyyy-MM-dd" v-model="tempRow.date" type="date"
								placeholder="结算时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="账单类型">
							<el-select v-model="tempRow.type" placeholder="请选择账单类型">
								<el-option label="个人" value="个人"></el-option>
								<el-option label="商家" value="商家"></el-option>
								<el-option label="公司" value="公司"></el-option>
								<el-option label="团体" value="团体"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="结算金额">
							<el-input v-model="tempRow.money"></el-input>
						</el-form-item>
						<el-form-item label="结算状态">
							<el-select v-model="tempRow.state" placeholder="请选择结算状态">
								<el-option label="已结算" value="已结算"></el-option>
								<el-option label="未结算" value="未结算"></el-option>
								<el-option label="结算中" value="结算中"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="sureEdit()">确 定</el-button>
					</span>
				</el-dialog>
			</div>
			<div class="block" style="float: right;margin-top: 10px;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next"
					:total="tableData.length">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				value1: '',
				value2: '',
				tableData: [],
				tempRow: {
					date: "",
					type: "",
					money: "",
					state: ""
				},
				editIndex: null,
				search: {
					date: "",
					type: "",
					money: "",
					state: ""
				},
				//分页
				currentPage:1,
				pageSize:10
			}
		},
		created() {
			this.getSettleList();
			// this.deleteRow()
		},
		methods: {
			// 页面底部的分页
			//当改变每页显示条数的选择器时会触发的事件
			handleSizeChange(size) {
				// 每页显示的数量是我们选择器选中的值size
				this.pageSize = size;
				console.log(this.pageSize); //每页下拉显示数据
			},
			//当改变当前页数的时候触发的事件
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage); //点击第几页
			},

			// 通过mockjs得到交易记录表格中的内容
			getSettleList() {
				this.$http.post("/list/settle", {
						id: 203
					})
					.then(res => {
						this.tableData = res.data.list;
					})
			},
			// 删除功能
			deleteRow(index, row, tableData) {
				console.log(index, row, tableData);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableData.splice(index, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 显示编辑弹框，并定义弹框里面的输入框内容
			toEditRow(index, row) {
				this.dialogVisible = true;
				this.tempRow.date = row.date;
				this.tempRow.type = row.type;
				this.tempRow.money = row.money;
				this.tempRow.state = row.state;
				this.editIndex = index;
			},
			// 实现编辑
			sureEdit() {
				this.dialogVisible = false;
				this.tableData[this.editIndex].date = this.tempRow.date;
				this.tableData[this.editIndex].type = this.tempRow.type;
				this.tableData[this.editIndex].money = this.tempRow.money;
				this.tableData[this.editIndex].state = this.tempRow.state;
			},
			// 重置搜索
			resetForm(SearchForm) {
				this.$refs[SearchForm].resetFields();
			},
			// 实现搜索功能

		},
		computed: {
			// 搜索过后的数据
			ftableData() {
				// 全局搜索
				return this.tableData.filter(item => {
					var flag = true;
					// 对搜索search对象进行遍历
					for (var k in this.search) {
						// 如果搜索条件不为空才进行搜索
						if (this.search[k] != "") {
							// 如果当前遍历item对应的k不包含搜索对应的k
							if (!item[k].includes(this.search[k])) {
								// flag值改变false（当前数据就会被过滤掉）
								flag = false;
							}
						}
					}
					return flag;
				})
			}
		},
	}
</script>

<style scoped="scoped">
	.settle {
		width: 100%;
		padding-right: 20px;
		overflow: auto;
	}

	.top {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #dddddd;
	}

	.top>p {
		border-left: 1px solid #0075d2;
		padding-left: 8px;
	}

	.mid {
		margin-top: 35px;
	}

	.mid .start {
		border-bottom: 1px dashed #dddddd;
	}

	.mid .result {
		margin-top: 30px;
	}
</style>
